<template>
  <div class="innerPageTable-box-OneTwo value-set-list-wrap innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="serviceForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="name" :label="'流程名称：'">
          <Input type="text" v-model.trim="searchForm.name" :placeholder="'请输入'" @on-enter="searchValueSet"></Input>
        </Form-item>
        <Form-item prop="formName" :label="'关联表单：'">
          <Input
            type="text"
            v-model.trim="searchForm.formName"
            :placeholder="'请输入'"
            @on-enter="searchValueSet"
          ></Input>
        </Form-item>
        <Form-item prop="year" :label="'年份：'">
          <DatePicker type="year" :value="searchForm.year" @on-change="handleChange"></DatePicker>
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" ref="search" @click="searchValueSet" />
          <RPButton btnType="default" text="重置" @click="handleReset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="valueSetTable" :config="pageTableConfig">
      <div slot="table-bar">
        <RPButton optType="create" type="info" text="新增流程" @click="createBpm" />
        <!-- <RPButton optType="create" type="info" text="模板预览" @click="previewFormModal" /> -->
      </div>
    </InnerPageTable>
  </div>
</template>

<script>
import connectForm from './components/connectForm.vue'
import bpmpCenterApi from '@/api/bpmCenter.js'
import copyBpm from './copyBpm.vue'
import SelectBpmMode from './components/SelectBpmMode.vue'
import steps from './components/steps.vue'
import { formColumns } from './columns'
import { getBpmPage } from '@/views/common'
export default {
  data() {
    return {
      userCode: sessionStorage.userCode,
      searchForm: {
        formName: '',
        name: '',
        year: '',
        connectForm: ''
      },
      subFormList: [],
      pageTableConfig: {
        loadDataFn: this.getServiceList,
        columns: formColumns.bind(this)(),
        autoFirst: true //默认 就是 false, 要配置在这里
      }
    }
  },
  mounted() {
    if (!this.$store.state.orgList) {
      this.$store.dispatch('getOrgList')
    }
  },
  methods: {
    handleChange(date) {
      this.searchForm.year = date
      this.searchValueSet()
    },
    getServiceList(tableObj) {
      let { responseProcess, param } = tableObj
      bpmpCenterApi
        .getBpmpPage({ ...param, ...this.searchForm, currentPage: param.commonPageDTO.currentPage })
        .then(res => {
          let { size, total, current, records, pages } = res.data.data
          records.forEach(element => {
            element.formListStr = element.formList?.map(item => item.name).join(', ')
          })
          responseProcess({
            pageNum: current,
            pageSize: size,
            pages: pages,
            records: records || [],
            total: total
          })
        })
    },
    searchValueSet(isCurrent) {
      if (!isCurrent) {
        this.$refs['valueSetTable'].currentPage = 1
      }
      this.$refs['valueSetTable'].load(this.searchForm)
    },
    handleReset() {
      this.$refs['serviceForm'].resetFields()
      this.searchValueSet()
    },
    createBpm() {
      new this.$pageModal(
        SelectBpmMode,
        {
          props: {}
        },
        data => {
          data &&
            new this.$sidelipPage(
              getBpmPage(data),
              {
                props: {}
              },
              data2 => {
                this.searchValueSet(true)
              }
            )
        }
      )
    },
    previewFormModal() {
      new this.$pageModal(
        steps,
        {
          props: {}
        },
        data => {}
      )
    },
    editBpm(row) {
      new this.$sidelipPage(
        getBpmPage(row.formType),
        {
          props: {
            id: row.id
          }
        },
        data => {
          this.searchValueSet(true)
        }
      )
    },
    copyBpm(row) {
      new this.$pageModal(
        copyBpm,
        {
          props: {
            row: row
          }
        },
        data => {
          data && this.searchValueSet(true)
        }
      )
    },
    deleteBpm(row) {
      this.$confirm({
        title: '删除',
        content: '当流程删除后不可撤回，您是否要继续删除?'
      }).then(() => {
        bpmpCenterApi.bpmpDelete([row.id]).then(res => {
          if (res.data.code == 200) {
            this.$Message.success({
              content: '删除成功',
              duration: 3
            })
            this.searchValueSet(true)
          } else {
            this.$Message.error({
              content: res.data.msg || '删除失败',
              duration: 3
            })
          }
        })
      })
    },
    previewBpm(row) {
      new this.$sidelipPage(
        getBpmPage(row.formType),
        {
          props: {
            // readOnly: true,
            id: row.id
          }
        },
        data => {
          this.searchValueSet(true)
        }
      )
    },
    associate(row) {
      new this.$pageModal(
        connectForm,
        {
          props: { 
            formType:row.formType,
            bpmpId: row.id }
        },
        data => {
          if (data) {
            const formData = data.data[0]
            const title = data.title
            bpmpCenterApi
              .bpmpAssociate({
                bpmpId: row.id,
                formId: formData.id
              })
              .then(res => {
                if (res.data.code == 200) {
                  this.$Message.success({
                    content: `${title}成功`,
                    duration: 3
                  })
                  this.searchValueSet(true)
                } else {
                  this.$Message.error({
                    content: res.data.msg || `${title}失败`,
                    duration: 3
                  })
                }
              })
          }
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ivu-table-wrapper {
  height: calc(100vh - 285px) !important;
  .ivu-table-body {
    height: 100%;
  }
}
</style>
